.example-tablist-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
}

.example-tabs {
  border: 1px solid var(--mat-sys-outline);
  min-height: 30vh;
}

.example-tabs:has(ul[aria-orientation='vertical']) {
  display: flex;
}

.example-tablist {
  gap: 8px;
  margin: 0;
  padding: 8px;
  max-height: 50vh;
  border-bottom: 1px solid var(--mat-sys-outline);
  border-radius: var(--mat-sys-corner-extra-small);
  display: flex;
  list-style: none;
  flex-direction: row;
  justify-content: center;
}

.example-tablist[aria-orientation='vertical'] {
  flex-direction: column;
  border-bottom: initial;
  border-right: 1px solid var(--mat-sys-outline);
  justify-content: start;
}

.example-tablist[aria-orientation='horizontal'] li::before {
  display: none;
}

.example-tablist[aria-orientation='horizontal'] li[aria-selected='true']::before {
  display: block;
}

.example-tablist[aria-disabled='true'] {
  background-color: var(--mat-sys-surface-dim);
}

.example-tab {
  gap: 16px;
  padding: 16px;
  display: flex;
  cursor: pointer;
  align-items: center;
  border-radius: var(--mat-sys-corner-extra-small);
}

.example-tablist:focus-within .example-tab:hover,
.example-tablist:focus-within .example-tab.cdk-active {
  outline: 1px solid var(--mat-sys-outline);
  background: var(--mat-sys-surface-container);
}

.example-tab:focus-within {
  outline: 2px solid var(--mat-sys-primary);
  background: var(--mat-sys-surface-container);
}

.example-tablist:focus-within .example-tab.cdk-active {
  background-color: var(--mat-sys-secondary-container);
}

.example-tab[aria-disabled='true'] {
  background-color: var(--mat-sys-surface-dim);
}

.example-tabpanel {
  margin: 8px;
}
